<template>
  <section>
    <h4>文章列表</h4>
    <el-row>
      <el-col :span="24">
        <el-table :data="list" v-loading="loading">
          <el-table-column prop="_id" label="id" min-width="120">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="150">
          </el-table-column>
          <el-table-column prop="auth" label="作者" width="100">
          </el-table-column>
          <el-table-column prop="desc" label="文章描述" width="100">
          </el-table-column>
          <el-table-column prop="view_count" label="浏览量" width="100">
          </el-table-column>
          <el-table-column prop="hidden" label="是否发布" width="120">
          </el-table-column>
          <el-table-column prop="category" label="文章类型" width="120">
          </el-table-column>
          <el-table-column prop="created_time" label="创建时间" min-width="60">
          </el-table-column>
          <el-table-column prop="updated_time" label="更新时间" min-width="60">
          </el-table-column>
          <el-table-column prop="aaaa" label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button @click="del(scope.row)">删除</el-button>
              <el-button @click="update(scope.row)">修改</el-button>
              <el-button @click="EditArticle(scope.row)">编辑文章</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div :span="24" style="text-align: center;margin-top: 20px">
      <el-button style="float: left;" @click="addFormVisible=!addFormVisible">创建文章</el-button>
    </div>
    <el-dialog
      title="编辑信息"
      :visible.sync="addFormVisible"
      @close="article={}"
      width="30%">
      <el-form v-model="article" label-width="80" :model="article" :rules="rule" ref="form">
        <el-form-item label="标题" prop="title">
          <el-input v-model="article.title" placeholder="输入标签排序"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="auth">
          <el-input v-model="article.auth" placeholder="输入标签名称"></el-input>
        </el-form-item>
        <el-form-item label="浏览量" prop="view_count">
          <el-input v-model="article.view_count" placeholder="输入标签名称"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="article.desc" placeholder="输入标签名称"></el-input>
        </el-form-item>
        <el-form-item label="是否发布" prop="hidden">
          <el-input v-model="article.hidden" placeholder="输入标签名称"></el-input>
        </el-form-item>
        <el-form-item label="文章类型" prop="category">
          <el-input v-model="article.category" placeholder="输入标签名称"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button @click="addFormVisible = false">关闭</el-button>
        <el-button @click="Editsubmit">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>/* eslint-disable indent,space-before-function-paren,spaced-comment */
  import {getArticleList, addArticle, updateArticle, removeArticle} from '../../api/api'

  export default {
    data() {
      return {
        list: [],
        addFormVisible: false,
        article: {},
        loading: true,
        rule: {
          order: [{required: true, message: '必须填写', trigger: 'blur'}],
          name: [{required: true, message: '必须填写', trigger: 'blur'}]
        }
      }
    },
    methods: {
      Init() {
        this.loading = true
        getArticleList().then(
          data => {
            this.list = data
            this.loading = false
          }
        ).catch()
      },
      update(b) {
        this.addFormVisible = true
        this.article.article_id = b.article_id
        this.article.title = b.title
        this.article.auth = b.auth
        this.article.view_count = b.view_count
        this.article.hidden = b.hidden
        this.article.category = b.category
        this.article.desc = b.desc
      },
      del(b) {
        this.$confirm('此操作将永久删除该, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeArticle({
            article_id: b.article_id
          }).then(
            data => {
              if (data) {
                this.$message.success(`成功删除1行`)
                this.Init()
              } else {
                this.$message.error(data.msg)
              }
            }
          ).catch()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      Editsubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let para = {
              title: this.article.title,
              auth: this.article.auth,
              view_count: this.article.view_count,
              hidden: this.article.hidden,
              category: this.article.category,
              desc: this.article.desc
            }
            console.log(!!this.article.article_id)
            if (this.article.article_id) {
              para.article_id = this.article.article_id
              updateArticle(para).then(
                data => {
                  if (data) {
                    this.$message.success(`成功修改${data.n}条`)
                    this.addFormVisible = false
                    this.Init()
                    this.article = {}
                  }
                }
              ).catch()
            } else {
              addArticle(para).then(data => {
                if (data) {
                  this.$message.success(`成功添加1条`)
                  this.addFormVisible = false
                  this.Init()
                  this.article = {}
                }
              }).catch()
            }
          } else {
            this.$message.error('填写错误')
          }
        })
      },
      EditArticle(b) {
        this.$router.push({path: '/article/add', query: {id: b.article_id}})
      }
    },
    mounted() {
      this.Init()
    }
  }
</script>
